<template>
  <view>
    <view v-if="loadstatus===0"
          class="">
      <view class="container">
        <view class="box_title zl-flex"
              style="margin-top: 0;">
          <view class="sort">
            <text class="zl_font_number zl-font-24 zl-color-white">1</text>
          </view>
          <text class="zl-m-l-16 zl-font-36 zl-font-bold zl-color-black">选择内容主题</text>
        </view>
        <view class="form_box">
          <view class="form_item zl-flex zl-row-between">
            <view class="form_item_left">
              <text class="zl-font-28 zl-font-bold  zl-one-yichu">内容主题</text>
            </view>
            <view class="form_item_right zl-flex zl-row-right">
              <!-- <text v-if="form.digitalModelId>0" class="zl-font-28 zl-font-500 zl-color-EB5E00 zl-one-yichu">
								已完成设置 </text>
							<text class="zl-font-28 zl-font-500 zl-color-EB5E00" v-else> 去选择 </text> -->
              <picker mode="selector"
                      @change="bindPickerChange"
                      :value="index"
                      :range="typeList"
                      range-key="name">
                <view class="uni-input">{{typeList[index].name||'请选择'}}</view>
              </picker>
              <image class="right_icon zl-m-l-10"
                     src="/static/icon/to_right_orange.png"></image>
            </view>
          </view>
        </view>
        <view class="box_title zl-flex"
              style="margin-top: 50rpx">
          <view class="sort">
            <text class="zl_font_number zl-font-24 zl-color-white">2</text>
          </view>
          <text class="zl-m-l-16 zl-font-36 zl-font-bold zl-color-black">填写关键词</text>
        </view>
        <view class="box"
              v-for="(item,index) in list"
              :key="index">
          <view class="box_item zl-m-b-20">
            <view class="zl-m-b-20">
              <text class="zl-font-28"
                    style="color: #E53F3A;">*</text>
              <text>{{item.key}}</text>
            </view>

            <view v-if="item.inputType===5">
              <!-- <view class="title"
                    style="height: 50rpx;">
                <view class="num">{{index+1}}</view>
                <view class="zl-font-32 zl-color-333 zl-font-600">{{item.key}}</view>
              </view> -->
              <view class="item-box">
                <view :class="isChecked(obj,index)?'act':''"
                      class="item zl-flex zl-row-center"
                      v-for="(obj,idx) in item.paramStr"
                      :key="idx"
                      @click="chooseItem(obj,index,item)">
                  {{obj.label}}
                </view>
              </view>
            </view>
            <view v-else-if="item.inputType===2"
                  class="textarea-box zl-flex zl-row-between"
                  style="background: #fff;border-radius: 8rpx;">
              <textarea style="height: 300rpx;padding: 20rpx;width: 630rpx;"
                        placeholder-style="font-size:28rpx"
                        :placeholder="item.placeholder"
                        :cursor-spacing="160"
                        :adjust-position="true"
                        maxlength="20000"
                        v-model="item.value"></textarea>
            </view>
            <view v-else
                  class="cell-box zl-flex zl-row-between"
                  style="background: #fff;border-radius: 8rpx;">
              <input :cursor-spacing="160"
                     :adjust-position="true"
                     v-model="item.value"
                     :type="inputType[item.inputType]"
                     :style="{'width':item.unit?'90%':'100%','height':'70rpx'}"
                     :auto-height="true"
                     placeholder-style="font-size:28rpx"
                     :placeholder="item.placeholder" />
              <text class="zl-m-r-20">{{item.unit}}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="footer zl-flex zl-row-center ">
        <view class="btn zl-theme-btn"
              @click="create()"> 生成脚本 </view>
      </view>
    </view>
    <view v-if="loadstatus===1"
          class="loading-box zl-flex-col zl-col-center zl-row-center">
      <image style="width: 360rpx;"
             src="/static/icon/loading.gif"
             mode="widthFix"></image>
      <text style="margin-top: -80rpx;"
            class="zl-font-28 zl-color-333">正在创作文案，请勿离开...</text>
    </view>
    <view v-if="loadstatus===2"
          class="">
      <view class="container">
        <view class="answer-box">
          <view class="">
            {{answer}}
          </view>
          <view class="tips"> 内容由AI生成 </view>
        </view>
      </view>
      <view class="footer zl-flex zl-row-center">
        <view v-if="from==='video'"
              style="width: 330rpx;"
              class="btn zl-theme-btn zl-m-r-30"
              @click="useIt()">
          使用该文案 </view>
        <view v-else
              style="width: 330rpx;"
              class="btn  zl-theme-btn zl-m-r-30"
              @click="copy()"> 复制内容 </view>
        <view style="width: 330rpx;"
              class="btn zl-theme-btn"
              @click="reply()"> 重写 </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data () {
    return {
      inputType: ['', 'text', '', 'number', 'digit'],
      typeList: [{
        type: 1,
        "name": "假数据1"
      }, {
        type: 2,
        "name": "假数据2"
      }],
      index: 0,
      list: [],
      // list: [{
      // 	"id": 1,
      // 	"key": "姓名",
      // 	"inputType": 1,
      // 	"placeholder": "请输入姓名",
      // 	"unit": ""
      // }, {
      // 	"id": 2,
      // 	"key": "性别",
      // 	"inputType": 1,
      // 	"placeholder": "请输入性别",
      // 	"unit": ""
      // }],
      templateID: 0,
      templateContent: '',
      sparkResult: '',
      loadstatus: 0, //0填写页面,1加载中,2加载完成
      sessionId: 0,
      answer: '',
      from: '',
      selectedItems: []
    };
  },
  onLoad (opt) {
    this.from = opt.from
    this.gettemplatetype()
  },
  methods: {
    isChecked (item1, index) {
      for (let i = 0; i < this.selectedItems.length; i++) {
        if (this.selectedItems[i].value === item1.value) {
          return true
        }
      }
    },
    chooseItem (obj, index, item) {
      console.log(obj, index);

      if (this.selectedItems && this.selectedItems.length > 0) {
        this.selectedItems.forEach((it, i) => {
          if (it.value === obj.value) {
            // this.selectedItems.splice(i, 1)
          } else {
            const tep = {
              value: obj.value,
              key: item.key,
            }
            this.selectedItems.forEach((it, i) => {
              if (it.key === item.key) {
                this.selectedItems.splice(i, 1, tep)
              }
            })
          }
        })
      } else {
        const tep = {
          value: obj.value,
          key: item.key,
        }
        this.selectedItems.splice(index, 1, tep)
      }

      this.list.forEach((item) => {
        this.selectedItems.forEach((it) => {
          if (item.key === it.key) {
            item.value = it.value
          }
        })
      })
    },
    gettemplatetype () {
      this.api.aichat.gettemplatetype(
        {
          group: 1
        }
      ).then(res => {
        if (res.code === 0) {
          this.typeList = res.data;
          this.gettemplate(this.typeList[this.index].type)
        } else {
          this.$util.msg(res.msg);
        }
      }).catch(err => {
        this.$util.msg('请检查网络连接！');
      })
    },
    bindPickerChange (e) {
      this.index = parseInt(e.detail.value);

      this.gettemplate(this.typeList[this.index].type)
    },
    replacePlaceholders () {
      let replacedContent = this.templateContent;
      this.selectedItems.forEach((item) => {
        const key = `【${item.key}】`;
        replacedContent = replacedContent.replace(new RegExp(key, 'g'), item.value);
      });
      this.list.forEach((item) => {
        // console.log(item);
        const key = `【${item.key}】`;
        replacedContent = replacedContent.replace(new RegExp(key, 'g'), item.value);
      });
      return replacedContent;
    },
    gettemplate (type) {
      this.api.aichat.gettemplate({
        type: type
      }).then(res => {
        if (res.code === 0) {
          this.templateID = res.data.templateId;
          this.templateContent = res.data.content;

          res.data.options.forEach(item => {
            if (item.inputType === 5) {
              item.paramStr = JSON.parse(item.paramStr)
            }
          })

          this.list = res.data.options

          this.list.forEach((item) => {
            //  inputType===5时，默认将第一个选项选中
            if (item.inputType === 5) {
              this.selectedItems.push({
                value: item.paramStr[0].value,
                key: item.key
              })
            }
          })
        } else {
          this.$util.msg(res.msg);
        }
      }).catch(err => {
        this.$util.msg('请检查网络连接！');
      })
    },
    create () {
      this.sparkResult = this.replacePlaceholders();
      console.log(this.sparkResult);
      var reg = /(\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f\ude80-\udeff])|[\u2600-\u2B55]/;
      for (let i = 0; i < this.list.length; i++) {
        var item = this.list[i];
        if (!item.value && item.inputType !== 5) {
          this.$util.msg('请输入' + item.key);
          return;
        }
        if (reg.test(!item.value)) {
          this.$util.msg('个性化设置暂不允许使用表情字符！');
          return;
        }
      }
      this.qw()
    },
    qw () {
      let par = {
        sessionId: this.sessionId ? this.sessionId : '',
        templateId: this.templateID,
        question: this.sparkResult,
      }
      this.loadstatus = 1;
      this.api.aichat.qwen(par).then(res => {
        if (res.code === 0) {
          this.sessionId = res.data.sessionId;
          this.answer = res.data.answer;
          console.log(this.answer);
          this.loadstatus = 2
        } else {
          this.$util.msg(res.msg);
        }
      }).catch(err => {
        this.$util.msg('请检查网络连接！');
      })
    },
    copy () {
      this.$util.copy(this.answer)
    },
    reply () {
      this.loadstatus = 0;
      this.answer = ''
      // this.qw()
    },
    useIt () {
      uni.$emit('useAI', this.answer);
      uni.navigateBack()
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  padding: 50rpx 30rpx 0;
  height: calc(100vh - 190rpx);
  overflow-y: scroll;
  padding-bottom: 20rpx;
}

.box_title {
  width: 690rpx;
  margin: 50rpx auto 0;

  .sort {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36rpx;
    height: 36rpx;
    text-align: center;
    background-color: #000000;
    border-radius: 5rpx;

    text {
      margin-top: 6rpx;
    }
  }

  image {
    width: 36rpx;
    height: 36rpx;
  }
}

.form_box {
  width: 690rpx;
  margin: 30rpx auto 0;
  padding-left: 30rpx;
  background-color: white;
  border-radius: 20rpx;

  .form_item {
    width: 660rpx;
    height: 100rpx;
    padding-right: 30rpx;
    position: relative;

    .form_item_left {
      text {
        width: 100%;
      }
    }

    .form_item_right {
      font-size: 28rpx;
      width: 100%;

      .right_icon {
        width: 10rpx;
        height: 20rpx;
      }

      .uni-input {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 300rpx;
        height: 80rpx;
        font-size: 28rpx;
        font-weight: 500;
        color: #eb5e00;
      }
    }

    .form_item_right ::v-deep {
      input {
        color: rgba(21, 21, 21, 1) !important;
        font-weight: 500;
      }

      uni-number-box {
        input {
          color: #e4265b !important;
          font-weight: 500;
        }
      }
    }
  }

  .form_item_line::after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: #f4f4f4;
    position: absolute;
    top: 99.9%;
  }
}

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 750rpx;
  height: 190rpx;
  background: #ffffff;

  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 690rpx;
    height: 110rpx;
    border-radius: 20rpx;
    font-size: 36rpx;
    color: #f9f9f9;
  }
}

.box {
  margin-top: 30rpx;

  .box_item {
    .cell-box {
      height: 80rpx;
      border: 2rpx solid #dcdfe6;
      padding: 0 30rpx;
    }

    .textarea-box {
      padding: 30rpx;
      border: 2rpx solid #dcdfe6;
    }
  }

  .selet {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .btn {
      padding: 10rpx 20rpx;
      border-radius: 8rpx;
      color: #fff;
      font-size: 24rpx;
      background-color: #e4265b;
    }
  }
}

.loading-box {
  width: 690rpx;
  padding: 50rpx 0;
  border-radius: 20rpx;
  margin: 50% 50%;
  translate: -50% -50%;
}

.answer-box {
  width: 690rpx;
  margin: 30rpx auto 0;
  background: #ffffff;
  border-radius: 20rpx;
  font-size: 28rpx;
  color: #333333;
  padding: 40rpx 30rpx;

  .tips {
    text-align: right;
    font-size: 24rpx;
    color: #999999;
    margin-top: 38rpx;
  }
}

.item-box {
  margin-top: 20rpx;
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;

  .item {
    width: 210rpx;
    height: 75rpx;
    background: #ffffff;
    border-radius: 18rpx;
    color: #333333;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
  }

  .act {
    // background: linear-gradient(
    //   90deg,
    //   #66cbc1 0%,
    //   #5877d9 22%,
    //   #5a76b5 100%
    // ) !important;
    background-color: #333;
    color: #ffffff !important;
    opacity: 1 !important;
  }
}
</style>